<script type="text/x-template" id="poster-show-dialog">
    <el-dialog title="相关海报" :visible.sync="posterDialogVisible" fullscreen :before-close="closeRlsPosterDialog">
        <div class="header">
            <el-form ref="searchForm" label-width="170px">
                <el-form-item label="标签">
                    <el-tag v-for="(item, index) in videoLabelList" :key="index"
                            :type="item.type"
                            effect="dark"
                            @click.native="handleSelectLabel(item)">
                        {{ item.label }}
                    </el-tag>
                </el-form-item>
            <#--<el-form-item  label="已选标签">-->
            <#--<span>{{selectedLabel}}</span>-->
            <#--</el-form-item>-->
                <el-form-item label="分辨率">
                    <el-tag v-for="(item, index) in picResolutionList" :key="index"
                            :type="item.type"
                            effect="dark"
                            @click.native="handleSelectPicResolution(item)">
                        {{ item.label }}
                    </el-tag>
                </el-form-item>
            <#--<el-form-item  label="已选分辨率">-->
            <#--<span>{{selectedPicResolution}}</span>-->
            <#--</el-form-item>-->
            </el-form>
        </div>
        <poster-show-list :data="posterInfoList" :id="id"></poster-show-list>
        <div class="footer">

                <el-button type="warning" @click="closeRlsPosterDialog">关闭</el-button>
                <el-button type="primary" @click="loadMore" :disabled="noData">加载更多</el-button>

        </div>
    </el-dialog>
</script>

<script>
    Vue.component('poster-show-dialog', {
        template: '#poster-show-dialog',
        props: ['id'],
        data: function () {
            return {
                selectedLabel: undefined,
                selectedPicResolution: undefined,
                picResolutionList: [],
                posterDialogVisible: true,
                selectedLabel: undefined,
                videoLabelList: [],
                posterInfoList: [],
                searchForm: {},
                pagination: {},
                selected: [],
                selectionType: 'multiple',
                urls: {
                    //分页数据接口
                    listRlsLabel: '/v1/aiPoster/listRlsLabel.html',
                    listRlsPoster: '/v1/aiPoster/listRlsPoster.html',
                    listResolution: '/v1/aiPoster/listResolution.html',
                },

                tableLoading: false,
                page: {
                    total: 0, // 总页数
                    currentPage: 1, // 当前页数
                    pageSize: 10 // 每页显示多少条
                },
                labelType: 'success'
            };
        },
        created: function () {

        },
        computed: {
            noData(){
                var size =  Math.ceil(this.page.total/15)
                return this.page.currentPage >= size
            }
        },
        watch: {
            'selectedLabel': {
                deep: true,
                handler: function (newVal, oldVal) {
                    if (newVal) {
                        this.loadRlsPoster()
                    }
                }
            },
            'selectedPicResolution': {
                deep: true,
                handler: function (newVal, oldVal) {
                    this.loadRlsPoster()
                }
            }
        },
        methods: {
            handleSelectPicResolution(item) {
                this.selectedPicResolution = item.label
                if (item.type == 'info') {
                    item.type = 'sucsess'
                    this.picResolutionList = this.handleLabelTypeChange(this.picResolutionList, item)
                } else {
                    item.type = 'info'
                    this.selectedPicResolution = undefined
                }

            },
            closeRlsPosterDialog() {
                this.$emit('close')
            },

            handleSelectLabel(item) {
                this.selectedLabel = item.label
                if (item.type == 'info') {
                    item.type = 'sucsess'
                    this.videoLabelList = this.handleLabelTypeChange(this.videoLabelList, item)
                } else {
                    item.type = 'info'
                    this.selectedLabel = undefined
                }
            },

            loadRlsPoster() {
                this.page.currentPage = 1
                this.ajax(this.urls.listRlsPoster, {
                            id: this.currentId,
                            poster_label: this.selectedLabel,
                            poster_resolution: this.selectedPicResolution,
                            page: 1,
                            rows: 15
                        }
                        , function (data) {
                            if (data.code === '0') {
                                this.posterInfoList = data.data.rows
                                this.page.total = data.data.total
                            } else {
                                this.$message(data.msg)
                            }
                        }.bind(this));
            },
            loadRlsLabel(id) {
                this.ajax(this.urls.listRlsLabel, {id: id}
                        , function (data) {
                            if (data.code === '0') {
                                this.convertVideoLabel(data.data)
                                this.handleSetLabelInit(data.data)
                            } else {
                                this.$message(data.msg)
                            }
                        }.bind(this));
            },
            convertVideoLabel(data) {
                var finalLabel = []
                var size = data.length
                var i = 0
                for (i; i < size; i++) {
                    label = data[i]
                    item = {}
                    if (i == 0) {
                        item.type = 'successs'
                    } else {
                        item.type = 'info'
                    }
                    item.label = label
                    finalLabel.push(item)
                }
                this.videoLabelList = finalLabel
            },
            handleSetLabelInit(data) {
                if (data) {
                    this.selectedLabel = data[0]
                    var size = this.videoLabelList.length
                    var i = 0
                    for (i; i < size; i++) {
                        item = data[i]
                        if (item.label == this.selectedLabel) {
                            item.type = 'success'
                        }
                    }
                }
            },
            handleLabelTypeChange(orignLabels, itemIn) {
                var finalLabel = []
                var size = orignLabels.length
                var i = 0
                for (i; i < size; i++) {
                    item = orignLabels[i]
                    if (item.type = 'success' && item.label != itemIn.label) {
                        item.type = 'info'
                    }
                    finalLabel.push(item)
                }
                return finalLabel
            },
            loadPicResolution() {
                this.ajax(this.urls.listResolution, {}
                        , function (data) {
                            if (data.code === '0') {
                                this.convertResoulution(data.data)
                            } else {
                                this.$message(data.msg)
                            }
                        }.bind(this));
            },
            convertResoulution(data) {
                var finalLabel = []
                var size = data.length
                var i = 0
                for (i; i < size; i++) {
                    label = data[i]
                    item = {}
                    item.type = 'info'
                    item.label = label
                    finalLabel.push(item)
                }
                this.picResolutionList = finalLabel
            },

            loadMore(){
                this.page.currentPage = this.page.currentPage + 1
                this.ajax(this.urls.listRlsPoster, {
                            id: this.currentId,
                            poster_label: this.selectedLabel,
                            poster_resolution: this.selectedPicResolution,
                            page:  this.page.currentPage,
                            rows: 15
                        }
                        , function (data) {
                            if (data.code === '0') {
                                this.posterInfoList = this.posterInfoList.concat(data.data.rows)
                                this.page.total = data.data.total
                            } else {
                                this.$message(data.msg)
                            }
                        }.bind(this));

            }
        }
        ,
        mounted: function () {
            if (this.id) {
                this.currentId = this.id
                this.loadRlsLabel(id)
                this.loadRlsPoster()
            }
            this.loadPicResolution()
        }
    })
</script>

<style>
    .header {
        margin-top: 15px;
        margin-left: -98px;
        margin-bottom: 20px;
    }

    .header .el-tag {
        margin: 10px;
        cursor: pointer;
    }
</style>